<template>
  <a-modal
    :width='1400'
    :visible='visible'
    :confirm-loading='loading'
    :title="isUpdate ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible='updateVisible'
    @ok='save'
  >
  <div class="ele-body ele-body-card">
    <a-card
      :bordered="true"
      :body-style="{padding: '5px'}">
      <a-form
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="{ md: { span: 11 }, sm: { span: 24 } }"
        :wrapper-col="{ md: { span: 13 }, sm: { span: 24 } }"
      >
        <a-row :gutter="8">
          <a-col :md="10" :sm="24" :xs="24">
            <a-form-item label='模板名称:' name='templateName'>
              <a-input v-model:value='form.templateName' allow-clear style="width: 300px;" />
            </a-form-item>
          </a-col>
          <a-col :md="14" :sm="24" :xs="24" />
        </a-row>
        <a-divider  orientation="left">选择设备</a-divider>
        <a-row :gutter="8">
          <a-col :md="4" :sm="24" :xs="24"/>
          <a-col :md="10" :sm="24" :xs="24">
            <a-checkbox
              v-model:checked="state.checkAll"
              :indeterminate="state.indeterminate"
              @change="onCheckAllChange"
            >
              全选
            </a-checkbox>
            <a-divider />
            <a-checkbox-group v-model:value="state.checkedList" :options="plainOptions" @change="onChange" />
          </a-col>
          <a-col :md="10" :sm="24" :xs="24"/>
        </a-row>
      </a-form>
    </a-card>
  </div>
  </a-modal>
</template>

<script>
import { message } from 'ant-design-vue';
import { DeviceRecordApi } from '@/api/property/DeviceRecordApi';
import {DeviceCommandTemplateDistributeApi} from "@/api/property/DeviceCommandTemplateDistributeApi";
export default {
  name: 'DeviceDrinkstationDeviceTemplateDrinkingstationConfigTemplateDistribute',
  components: {

  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object
  },
  async created() {
    this.form = Object.assign({}, this.data);
    let params = {
      "templateCode" : "drinkstation"
    };
    let that  = this;
    let devicelistResult = await DeviceRecordApi.list(params);
    if (devicelistResult && devicelistResult.data && devicelistResult.data.length > 0) {
      devicelistResult.data.forEach(function(item, index) {
        let itemdata = {
          label:  "[牧场]"+ (item.ranchName ? item.ranchName : "未设置") + "——[牛舍]" + (item.oxtallName ? item.oxtallName : '未设置') + '——[设备id]' + item.recordId,
          value: item.recordId,
          sort : item.orgId + "-"  + item.oxtId
        };
        that.plainOptionsVal.push(item.recordId);
        that.plainOptions.push(itemdata);
        that.plainOptions.sort((a, b) => a.sort.localeCompare(b.sort));
      });
    }
  },
  data() {
    return {
      form : {},
      state : {
        indeterminate: true,
        checkAll: false,
        checkedList : []
      },
      rules: {

      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      plainOptions : [],
      plainOptionsVal : []
    };
  },
  methods: {
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    onChange(checkedList) {
      this.state.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
      this.state.checkAll = checkedList.length === this.plainOptions.length;
    },
    onCheckAllChange(e){
      let that = this;
      Object.assign(that.state, {
        checkedList: e.target.checked ? that.plainOptionsVal : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },

    /**
     * 保存和编辑
     * 写到队列，队列发送完回写到原配置
     * @author cancan
     * @date 2022/03/04 21:15
     */
    save() {
      console.log(this.state);
      if (this.state.checkedList.length == 0) {
        message.error('请选择设备');
        return;
      }
      let addParams = {
        "templateCode" : "drinkstation",
        "recordIds" : this.state.checkedList.join(','),
        "templateId" :  this.data.ddsctId,
        "dictate" : 1,
        "sceneDictate" : 1
      };
      // 修改加载框为正在加载
      this.loading = true;
      let result = null;
      result = DeviceCommandTemplateDistributeApi.add(addParams);
      result.then(res => {
        // 移除加载框
        this.loading = false;
        // 提示添加成功
        message.success(res.message);
        // 关闭弹框，通过控制visible的值，传递给父组件
        this.updateVisible(false);
        // 触发父组件done事件
        this.$emit('done');
      })
        .catch(() => {
          this.loading = false;
        });
    },
  }
};
</script>
<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}
.regionclass /deep/ .ant-col-md-11 {
  max-width : 30% !important;
}
.regionclass /deep/ .ant-col-md-13 {
  max-width: 70% !important;
}
</style>
